<template>
  <div :id="componentId" :style="componentStyle"></div>
</template>

<script>
export default {
  name: 'Bar',
  props: {
    componentId: String,
    componentStyle: String,
    classifyNames: Array,
    classifyNums: Array,
  },
  data () {
    return {
    }
  },
  mounted(){
    this.drawLine()
  },
  methods: {
    drawLine(){
      let dom = document.getElementById(this.componentId)
      let myChart = this.$echarts.init(dom)
      let options = {
          textStyle:{
            color: 'rgba(255,255,255,.5)'
          },
          grid:{
            top: '20px',
            bottom: '40px',
            left: '55px',
            right: '15px',
          },
          tooltip: {},
          xAxis: {
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,.3)'
                }
              },
              axisLabel: {
                interval: 0,
                rotate: 38
              },
              splitArea:{
                show: true,
                areaStyle: {
                  color: ['rgba(255,255,255,0.1)','rgba(255,255,255,0.05)']
                }
              },
              axisTick: {
                show: false
              },
              data: this.classifyNames
          },
          yAxis: {
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0)'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
          },
          series: [{
              name: '重量',
              type: 'bar',
              barWidth: '20',
              data: this.classifyNums,
              label: {
                show: 'true',
                position: 'outside'
              },
          }]
      }
      myChart.setOption(options);
    }
  }
}
</script>

